<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: -apple-system, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
        }
        
        .form-container {
            width: 700px;
            margin: 0 auto;
            margin-top: 100px;
            padding: 20px;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
            border-radius: 10px;
            overflow: hidden;
        }
        
        .form-content {
            height: 500px;
        }
        
        .form-content h1 {
            font-size: 24px;
            font-weight: 400;
        }
        
        input[type="text"],
        input[type="email"],
        input[type="password"] {
            display: block;
            outline: none;
            border-radius: 4px;
            width: 438px;
            height: 50px;
            padding: 0 20px;
            font-size: 20px;
            border: 1px #aaa solid;
        }
        
        input[type="submit"] {
            display: block;
            position: relative;
            width: 100%;
            height: 80px;
            border: none;
            color: #fff;
            font-size: 24px;
            font-weight: lighter;
            background-color: #96b97d;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .input-wrapper {
            width: 500px;
        }
        
        .img-wrap {
            float: right;
            height: 100%;
            line-height: 52px;
        }
        
        input[type="submit"]:active {
            background-color: #7c9e63;
        }
        
        .warn {
            color: red;
            font-size: 14px;
            width: 100px;
        }
        
        .choice {
            position: relative;
        }
        
        .choice a {
            display: inline-block;
            color: #bbb;
            font-size: 24px;
            text-decoration: none;
            font-weight: 500;
        }
        
        .su {
            margin-left: 20px;
        }
        
        .active {
            color: black !important;
        }
        
        .choice .slider {
            position: absolute;
            display: block;
            width: 48px;
            height: 4px;
            border-radius: 2px;
            background-color: #96b97d;
            transition: .2s;
        }
        
        .form-wrap {
            width: 1304px;
            display: flex;
            flex-flow: row nowrap;
            transform: translateX(-50%);
            transition: .4s;
        }
        
        form {
            transition: .2s;
            opacity: 0;
        }
        
        form.active {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="form-container">
        <div class="choice">
            <a class='lg' href="javascript:;">登录</a>
            <a class='su active' href="javascript:;">注册</a>
            <span class="slider"></span>
        </div>
        <div class="form-wrap">
            <form class="login" action="javascript:;">
                <table class="form-content">
                    <tbody>
                        <tr>
                            <td align="right"><label for="username">用户名：</label></td>
                            <td>
                                <input type="text" name="username" maxlength="24" id="username">
                            </td>
                            <td>
                                <p class="warn">&nbsp;</p>
                            </td>
                        </tr>
                        <tr>
                            <td align="right"><label for="password">密码：</label></td>
                            <td>
                                <input type="password" maxlength="24" name="password" id="password" required="required">
                            </td>
                            <td colspan="2">
                                <p class="warn">&nbsp;</p>
                            </td>
                        </tr>

                        <tr>
                            <td>&nbsp;</td>
                            <td><input type="submit" value="登录"></td>
                        </tr>
                    </tbody>
                </table>
            </form>
            <form class="signup active" action="javascript:;">
                <table class="form-content">
                    <tbody>
                        <tr>
                            <td align="right"><label for="username">用户名：</label></td>
                            <td>
                                <input type="text" name="username" maxlength="24" id="username">
                            </td>
                            <td>
                                <p class="warn">&nbsp;</p>
                            </td>
                        </tr>

                        <tr>
                            <td align="right"><label for="email">邮箱：</label></td>
                            <td>
                                <input type="email" name="email" maxlength="24" id="email">
                            </td>
                        </tr>
                        <tr>
                            <td align="right"><label for="password">密码：</label></td>
                            <td>
                                <input type="password" maxlength="24" name="password" id="password" required="required">
                            </td>
                            <td colspan="2">
                                <p class="warn">&nbsp;</p>
                            </td>
                        </tr>

                        <tr>
                            <td>&nbsp;</td>
                            <td><input type="submit" value="立即注册"></td>
                        </tr>

                    </tbody>
                </table>
            </form>

        </div>
    </div>
</body>
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
    var usn = $('input[id="username"]');
    var email = $('input[id="email"]');
    var pwd = $('input[id="password"]');

    function makeWarn(e, m) {
        var warn = e.parents('td').next('td').find('.warn');
        warn.text(m);
        warn.css("opacity", "1");
        e.css("border-color", "red")
    }

    function cancelWarn(e) {
        var warn = e.parents('td').next('td').find('.warn');
        warn.css("opacity", "0");
        e.css("border-color", "")
    }

    function testUsn() {
        var reg = /.*\s.+/;
        var warn = usn.parents('tr').next('tr').find('.warn');
        if (usn.val() == '') {
            makeWarn(usn, "用户名不能为空")
        } else if (usn.val().match(reg)) {
            makeWarn(usn, "用户名不能含有空格")
        }
    }
    usn.on("blur", testUsn)
    usn.on("focus", () => {
        cancelWarn(usn)
    })

    function testPwd() {

        var reg1 = /.*\d.*/;
        var reg2 = /.*[a-zA-Z].*/;
        var reg3 = /.*\s.*/;
        var warn = pwd.parents('tr').next('tr').find('.warn');
        if (pwd.val() == '') {
            makeWarn(pwd, "密码不能为空");
        } else if (pwd.val().match(reg3)) {
            makeWarn(pwd, "密码不能含有空格")
        } else if (!(pwd.val().match(reg2) && pwd.val().match(reg1))) {
            makeWarn(pwd, "密码必须含数字和字母")
            pwd.css("border-color", "red");
        } else if (pwd.val().length < 6) {
            makeWarn(pwd, "密码至少为6位");
        }
    }
    pwd.on("blur", testPwd)

    pwd.on("focus", () => {
        cancelWarn(pwd)
    })

    $('input[type="submit"]').on('click', () => {
        testPwd();
        testUsn();
    })
    $('.slider').css("left", $('.choice .active').get(0).offsetLeft + 'px')
    $('.choice').on('click', 'a', function() {
        $('.slider').css("left", this.offsetLeft + 'px')
        $('.choice .active').removeClass('active');
        $(this).addClass('active');
        if ($(this).index() == 0) {
            $(".form-wrap").css("transform", "translateX(0)");
            $('form.active').removeClass('active');
            $(".login").addClass('active');
        } else {
            $(".form-wrap").css("transform", "translateX(-50%)");
            $('form.active').removeClass('active');
            $(".signup").addClass('active');
        }
    })
</script>

</html>